<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
	#homepage_help_win{background: #EFEFEF;}
	#homepage_help_win_left input{width: 179px; }
	#homepage_help_win_categories{width: 100%;background: none;font-size: 11px;}
	#homepage_help_win_right{background-color: #fff;font-size: 13px;}
	#homepage_help_win_wnd_title{font-size: 13px; line-height: 13px;}
</style>
	<div id="homepage_help_win" class="row">		
		<!-- left -->
		<div id="homepage_help_win_left" class="left wp_w_181 wp_ml_10 wp_mt_10">
			<input type="text" name="keyword"  id="homepage_help_win_search">			
			<div id="homepage_help_win_categories" ></div>
		</div>
		<!-- right -->
		<div id="homepage_help_win_right" class="right wp_w_447  wp_h_640 wp_pl_10"></div>

		<!-- left template -->
		<script type="text/x-kendo-template" id="homepage_help_win_left_tmpl">
			<ul >
				<li>#:title#</li>
				<li>#:desc#</li>
			</ul>
		</script>

		<!-- right template -->
		<script type="text/x-kendo-template" id="homepage_help_win_right_tmpl">
			<p>
				#= detail #
			</p>
		</script>

		<!-- script  -->
		
		<script>

       
			$(function(){

				//init template window
				var homepage_help_win = $('#homepage_help_win');
				homepage_help_win.kendoWindow({
					width:658,
					height:640,
					title:'Help',
					visible:false,
					actions:["Minimize", "Close"],
					close:function(){
						
					}
				});
				// control show window
				$('#homepage_header_helpBtn').on({
					click:function(e){
						homepage_help_win.data("kendoWindow").center();
						homepage_help_win.data("kendoWindow").open();
					}
				});
				
				// for I18N
				// homepage_help_win.data("kendoWindow").title("Hello");

				//  --------------------------data source bind------------------------------------------
				var movies = [
                        { "title": 'Share a Cweet with a Community',  "desc":'share a cweet with a community'},
                        { "title": 'Check Updates-Field Description',  "desc": 'check updates-field description' }
                    ];

                //----------------------------widget render ----------------------------------------------------------

				 $("#homepage_help_win_categories").kendoListView({
	                dataSource: movies,
	                template: kendo.template($('#homepage_help_win_left_tmpl').html())
            	});

				var homepae_help_win_right_tmpl = kendo.template($('#homepage_help_win_right_tmpl').html());
				$('#homepage_help_win_right').html(homepae_help_win_right_tmpl({
					detail:movies[0].title
				}));
				//----------------------------event ----------------------------------------------------------
				// resize window to speical size ?
				$('#homepage_help_win_resize').bind({
					click:function(e){
						homepage_help_win.data("kendoWindow").wrapper.width(300);
				}});
				
				// $('#homepage_help_win_categories>ul>li').bind({
				//  	click:function(e){
				 		
				//  	}
				//  });
				var homepage_help_win_search = $('#homepage_help_win_search');
				// search button events 
				homepage_help_win_search.bind({
					keyup:function(){
						$('#homepage_help_win_categories>ul>li').each(function(){
							console.log($(this).html());
						});
					}
				});
			});
			
		</script>

		
	</div>